<!--
 * @Author: linZeJian
 * @Date: 2022-04-24 15:24:05
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-04-24 16:10:09
 * @Description: 
-->
<!-- 预览生成具体的表单 -->
<template>
  <el-row
    :class="{
      [element.options.customClass]: element.options.customClass ? true : false
    }"
    type="flex"
    :gutter="element.options.gutter || 0"
    :justify="element.options.justify"
    :align="element.options.align"
  >
    <el-col
      v-for="(item, index) in element.columns"
      :key="index"
      :span="item.span || 0"
    >
      <template v-for="(col, index) in item.list">
        <generate-col-item
          v-if="col.type == 'grid'"
          :key="col.index"
          :model.sync="dataModels"
          :rules="rules"
          :element="col"
          :remote="remote"
          :blanks="blanks"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-col-item>

        <generate-form-item
          v-else
          :key="col.key"
          :models.sync="dataModels"
          :rules="rules"
          :widget="col"
          :remote="remote"
          :blanks="blanks"
          :parentContainer="true"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-form-item>
      </template>
    </el-col>
  </el-row>
</template>

<script>
import GenerateFormItem from "./GenerateFormItem";

export default {
  name: "generate-col-item",
  components: {
    GenerateFormItem
  },
  props: ["element", "model", "rules", "remote", "blanks", "parentContainer"],
  data() {
    return {
      dataModels: this.model
    };
  },
  watch: {
    model: {
      deep: true,
      handler(val) {
        this.dataModels = this.model;
      }
    },
    dataModels: {
      deep: true,
      handler(val) {
        this.$emit("update:model", val);
      }
    }
  }
};
</script>
